<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>1移动端的三大事件</title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background: red;
				float: left;
			}

			.box1 {
				width: 100px;
				height: 100px;
				background: orange;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式（addEventListener）</div>
		<div class="box1">
			touchstart 手指触摸<br />
			touchmove 手指移动<br />
			touchend 手指离开</div>


		<script type="text/javascript">
		/* 注意：
		   在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式（addEventListener）。 
		*/

			/* 移动端touchend比pc端mouseup快 */
			var div = document.getElementById("box");
			div.addEventListener("touchstart", start);
			div.addEventListener("touchmove", move);
			div.addEventListener("touchend", end);

			function start() {
				console.log("start")
			}

			function move() {
				console.log("move")
			}

			function end() {
				console.log("end")
			}
		</script>
	</body>
</html>
